<template>
  <div>
        <div class="insertInput">
            <el-input v-model="inputDep" placeholder="请输入需要添加的部门" size="small"></el-input>
            <el-button type="primary" size="small">添加</el-button>
        </div>
        <Table :config="tableConfig">
            <template v-slot:operation="depData">
                <el-button size="mini" type="primary" @click="updateData(depData.data)">修改</el-button>
                <el-button size="mini" type="danger" @click="deleteData(depData.data)">删除</el-button>
            </template>
        </Table>
  </div>
</template>

<script>
import Table from "@/components/Table.vue"
import {myConfirm} from '@/utils/myutils'

export default {
  name: "DepComp",
  props: {},
  components: {
    Table,
  },
  data() {
    return {
        tableConfig:{
            orderNumber:true,
            //表头配置
            tableHeader:[
                {
                    label:'编号',
                    prop:'id',
                },
                {
                    label:'名称',
                    prop:'name',
                },
                {
                     label:'操作',
                     columnType:'slot',
                     slotName:'operation'
                }
            ],
             //表格数据
            tableData: [],
        },

        //删除id集合
        deleteIds:[],
        //新增
        inputDep:'',
    };
  },
  methods: {
      updateData(obj){
          console.log(obj)
      },

    

     //删除部门
      deleteData(obj){
          myConfirm({}).then(()=>{
            this.deleteIds.push(obj.id);
            if(this.deleteIds.length == 0) return;
            this.$http({
                method:'delete',
                url:'/system/basic/department/',
                data:this.deleteIds
            }).then(resp=>{
                if(resp.code == 0){
                    this.$message.success({message:"删除成功!"})
                    this.getDepartmentData()
                }
            });
            this.deleteIds = [];
          }).catch(()=>{this.$message.info({message:'已取消删除'})});
          
      },


    //获取部门列表
      getDepartmentData(){
            this.$http({
                method:'get',
                url:'/system/basic/department/'
            }).then(resp=>{
                this.tableConfig.tableData = resp;
            })
      }
  },
  mounted() {
      this.getDepartmentData()
  },
  watch: {},
  computed: {},
  filters: {},
};
</script>

<style scoped>
.insertInput{
    margin-bottom:8px;
}

.insertInput .el-input{
    width:300px;
    margin-right:5px;
}
</style>